<template>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="login-form">
      <div class="overlay"></div>
      <el-row class="login-container">
        <h2>管理员登录</h2>
        
        <el-input style="height: 50px; margin-top: 20px;"
          v-model="form.adminaccount"
          placeholder="请输入账号"
          required
          name="adminaccount"
        ></el-input>

        <el-input style="height: 50px; margin-top: 20px;"
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
          required
          name="password"
        ></el-input>
  
        <el-form-item class="button-container">
          <el-button class="button" 
          type="primary" 
          @click="onSubmit">登录</el-button>
        </el-form-item>
        <div class="footer">
          <p><router-link to="/">用户登录</router-link></p>
        </div>
  
        <!-- <div class="footer"> -->
          <!-- <p>没有账号？<router-link to="/register">注册</router-link></p> -->
          <!-- <p><router-link to="/forgot-password">忘记密码？</router-link></p> -->
        <!-- </div> -->
      </el-row>
    </el-form>
</template>
  
<script setup>
import axios from "axios";
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAdminStore } from '../store/useAdminstore';
import { jwtDecode } from 'jwt-decode'; // 使用命名导入
import { ElMessage } from 'element-plus';
const adminStore = useAdminStore();
const router = useRouter();

const form = reactive({
  adminaccount: '',
  password: ''
});

const onSubmit = async () => {
  try {
    const response = await axios.post('http://26.239.98.70:3000/api/admin/login', {
      adminaccount: form.adminaccount,
      password: form.password
    });

    console.log('从后端拿到的数据');
    console.log(response);
    // 假设响应中有一个字段 status 判断登录是否成功
    if (response.data.status === 0) {
      ElMessage.success("登录成功");
      const token = response.data.token;

      // 使用 jwt-decode 解码 token
      const decodedToken = jwtDecode(token); // 使用命名导入的 decode 函数

      console.log('解码后的token');
      console.log(decodedToken);

      adminStore.setToken(token);
      localStorage.setItem("token", token);

      adminStore.setAdminInfo(decodedToken);
      localStorage.setItem("adminInfo", JSON.stringify(decodedToken));

      console.log('store里的：');
      adminStore.setAdminInfo(decodedToken);
      console.log(adminStore.adminInfo);

      router.push("/admin/home/user").then(() => {
        window.location.reload();
      });


    } else {
      ElMessage.error("账号或密码错误");
    }
  } catch (error) {
    console.error("登录失败", error);
    ElMessage.error("登录请求失败");
  }
};

</script>


<script>
export default {
  name: 'AdminLogin',
  mounted() {
    document.body.style.fontFamily = "'Noto Sans SC', sans-serif";
    document.body.style.background =
      "url('/src/assets/login.jpg') no-repeat center center fixed";
    document.body.style.backgroundSize = "cover";
    document.body.style.margin = "0";
    document.body.style.padding = "0";
    document.body.style.display = "flex";
    document.body.style.justifyContent = "center";
    document.body.style.alignItems = "center";
    document.body.style.height = "100vh";
    document.body.style.color = "white";
    document.body.style.overflow = "hidden";
  }
}
</script>

<style src="../assets/style/AdminLogin.css" scoped></style>
  